<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>选择仪表</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="./css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="css/headersearch.css" />
    <link rel="stylesheet" type="text/css" href="./css/comm.css" />
    <link rel="stylesheet" type="text/css" href="./css/meterpublicwrite.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <style>
        .new-content-border {
            position: relative;
            border: solid 1px #ddd;
            border-radius: 4px;
            padding: 6px 10px;
            margin-bottom: 10px;
        }

        .new-content-tag {
            width: 58px;
            height: 20px;
            border-radius: 4px;
            position: absolute;
            right: 12px;
            top: 22%;
        }

        .top-bg-blue {
            border-color: #00acfc !important;
        }

        .top-bg-blue .rightcontent {
            position: absolute;
            top: 0;
            right: -1px;
            bottom: 0;
            width: 20px;
        }

        .van-col:nth-child(2n+1) {
            padding-left: 0 !important;
            padding-right: 5px !important;
        }

        .van-col:nth-child(2n) {
            padding-left: 5px !important;
            padding-right: 0 !important;
        }

        .new-icon-btn-right {
            color: #cfe4fa;
            vertical-align: middle;
            position: absolute;
            right: 20px;
        }

        .new-boxarea {
            width: 100%;
            height: 100%;
            position: relative;
            padding: 10px 15px;
            border: solid 1px #fff;
            border-radius: 6px;
        }

        .new-room-width {
            width: calc(100% - 65px);
        }

        .new-headerBox {
            height: 5rem !important;
        }

        .new-refresh-content {
            margin-top: 5.2rem;
        }

        .searchbottom {
            height: 4rem;
            position: absolute;
            background: none;
            border-top: solid 0.5px #f8f8f8;
        }

        .aui_bottombtn {
            line-height: 1.8rem;
            color: #fff;
            font-size: 0.7rem;
            text-align: center;
            height: 1.8rem;
            background: #289FFF;
            box-shadow: 0px 4px 8px 0px rgba(49, 127, 203, 0.32);
            border-radius: 22px;
        }

        .aui_bottombtn.left {
            color: #828c9a;
            background: #fff;
            box-shadow: 0px 4px 8px 0px rgba(60, 128, 209, 0.1);
            border: solid 0.5px #f7fbff;
            position: absolute;
            top: 0.8rem;
            bottom: 0.5rem;
            left: 0.5rem;
            width: 35%;
        }

        .aui_bottombtn.right {
            position: absolute;
            top: 0.8rem;
            bottom: 0.5rem;
            right: 0.5rem;
            width: 55%;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div v-on:click="doHideSearch()" v-if="showsearch" class="maskbg">
        </div>
        <div v-if="showsearchparam" class="searchparam nomenu" style="height: 50%;"
            v-bind:style="{'top':topHeight-56+'px'}">
            <div class="searchcontent" style="height: 100%;">
                <div class="searchparamtitle">
                    仪表种类
                </div>
                <div class="searchparamitem">
                    <label v-on:click="doSelectMeterCategory(item.ID,item.Name)"
                        v-bind:class="{'active':form.MeterCategoryIDs.indexOf(item.ID)>-1}"
                        v-for="item in MeterList">{{item.Name}}</label>
                </div>
                <div class="searchparamtitle">
                    本月抄表进度
                </div>
                <div class="searchparamitem">
                    <label v-on:click="doSelectMeterStatus(item.ID,item.Name)"
                        v-bind:class="{'active':form.MeterStatusID==item.ID}"
                        v-for="item in MeterStatusList">{{item.Name}}</label>
                </div>
                <div class="aui_bottom searchbottom">
                    <div v-on:click="doReset(1)" class="aui_bottombtn left">重置</div>
                    <div v-on:click="doSearch()" class="aui_bottombtn right">确认</div>
                </div>
            </div>
        </div>
        <div id="topheader" class="aui-content headerBox bgshadow" v-bind:class="{'new-headerBox':MeterReadType!=1}">
            <div id="topheadercontent" class="header-content">
                <div v-if="MeterReadType==1" class="header">
                    <div class="breadcrumb-header">
                        <label v-on:click="do_open_header(item)" v-for="(item,index) in headerlist">
                            <span v-bind:class="{'islast':index==(headerlist.length-1)}">{{item.name}}</span>
                            <i v-if="index<(headerlist.length-1)" class="icon iconfont icon-arrow-right"></i>
                        </label>
                        <div v-on:click="do_select_project()" v-if="headerlist.length==0">
                            请选择资源
                            <div class="header_add_img fr"><img src="../image/news_li_more.png" /></div>
                        </div>
                    </div>
                </div>
                <div class="aui-more">
                    <!-- <div class="searchbox">
                        <div class="aui-tab menu-name">
                            <span id="choosemeter">{{MeterCategoryDesc}}</span>
                            <i class="icon iconfont icon-down"></i>
                        </div>
                        <div class="aui-tab menu-name">
                            <span id="choosedate" data-options='{"type":"month"}'
                                v-bind:class="{'textColorPlaceholder':form.writeDate==''}">{{form.writeDate==''?'选择日期':form.writeDate}}</span>
                            <i class="icon iconfont icon-down"></i>
                        </div>
                    </div> -->
                    <div class="searchbox">
                        <div class="aui-tab menu-name" v-on:click="doSelectSearchParam(1)">
                            筛选
                            <i v-if="!showsearchparam" class="icon iconfont icon-down"></i>
                            <i v-if="showsearchparam" class="icon iconfont icon-shangjiantou"></i>
                        </div>
                        <div class="aui-tab menu-name" v-on:click="doSelectSearchParam(2)">
                            {{form.startMonth?form.startMonth:'抄表日期'}}
                            <i v-if="!showsearchmonth" class="icon iconfont icon-down"></i>
                            <i v-if="showsearchmonth" class="icon iconfont icon-shangjiantou"></i>
                        </div>
                    </div>
                </div>
                <div class="aui-searchbar" id="search">
                    <div class="aui-searchbar-input aui-searchbar-input-white  aui-border-radius">
                        <i class="icon iconfont icon-sousuo"></i>
                        <input v-model="form.keywords" type="search"
                            :placeholder="MeterReadType==1?'资源编号、仪表编号、仪表名称':'仪表编号、仪表名称'" id="search-input">
                        <div class="aui-searchbar-clear-btn">
                            <i class="icon iconfont icon-guanbi"></i>
                        </div>
                    </div>
                    <div class="aui-searchbar-btn" tapmode></div>
                </div>
            </div>
        </div>
        <section id="main_refresh" class="aui-refresh-content" v-bind:class="{'new-refresh-content':MeterReadType!=1}"
            style="padding-bottom: 100px;">
            <div v-if="MeterReadType==1" class="aui-content task" v-if="RoomList.length>0">
                <div v-for="(items,indexs) in RoomList" class="boxarea mainbox pb10">
                    <div class="work_con_box">
                        <div class="aui-row">
                            <div class="aui-col-xs-12 leftcolumn">
                                <div class="aui-grid-label">
                                    {{items.Name}}
                                    <span v-if="items.Name" v-on:click="onOpenRecord(items)"
                                        class="typestatus text-right">
                                        <van-icon name="arrow" />
                                    </span>
                                </div>
                                <!-- <div v-else class="aui-grid-label">
                                    {{item.MeterName}}
                                    <span v-if="item.FeeStatus==0" class="typestatus dsl">可抄表</span>
                                    <span v-if="item.FeeStatus==1" class="typestatus ycz">已出账</span>
                                </div> -->
                            </div>
                        </div>
                        <div class="aui-row" style="margin-top:5px;">
                            <van-row gutter="20">
                                <van-col v-if="items.List==undefined||items.List.length<=0" span="24">
                                    <div class="noinfo aui-padded-t-10 aui-padded-b-15" id="noorder">
                                        <img src="../image/index/noinfomsg_icon.png" alt="" />
                                        <h5><br />暂无数据</h5>
                                    </div>
                                </van-col>
                                <van-col v-if="items.List.length>0" v-on:click="onSelectItem(item)" span="12"
                                    v-for="(item,index) in items.List">
                                    <div class="new-content-border" v-bind:class="{'top-bg-blue':item.IsSelect}">
                                        <img v-if="item.IsSelect" class="rightcontent"
                                            src="../image/isroomselects.png" />
                                        <div class="aui-ellipsis-1" v-bind:class="{'new-room-width':item.IsMonthWrite}">
                                            <span>
                                                <i v-if="item.MeterCategoryID==1"
                                                    class="icon iconfont icon-shuibiao aui-margin-r-5"
                                                    style="color: #289FFF;"></i>
                                                <i v-if="item.MeterCategoryID==2"
                                                    class="icon iconfont icon-dianbiao aui-margin-r-5"
                                                    style="color: coral;"></i>
                                                <i v-if="item.MeterCategoryID==3"
                                                    class="icon iconfont icon-qibiao aui-margin-r-5"
                                                    style="color: red;"></i>
                                            </span>
                                            {{item.MeterNumber?item.MeterNumber:'--'}}
                                        </div>
                                        <van-tag v-show="item.IsMonthWrite" color="#ff7f50" class="new-content-tag"
                                            plain>本月已抄</van-tag>
                                    </div>
                                </van-col>
                            </van-row>
                        </div>
                    </div>
                </div>
                <div v-if="RoomList.length>0" class="notodayList">
                    没有更多内容
                </div>
            </div>
            <div v-if="MeterReadType!=1" class="aui-content task" v-if="RoomList.length>0">
                <div v-for="(item,index) in RoomList" class="boxarea mainbox" style="padding: 0;border-radius: 6px;">
                    <div class="new-boxarea" v-bind:class="{'top-bg-blue':item.IsSelect}">
                        <img v-if="item.IsSelect" class="rightcontent" src="../image/isroomselects.png" />
                        <div class="work_con_box">
                            <div class="aui-row">
                                <div class="aui-col-xs-12 leftcolumn">
                                    <div class="aui-grid-label" style="width:calc(100% - 80px);">
                                        <span>
                                            <span v-on:click="onSelectItem(item)">
                                                <span>
                                                    <i v-if="item.MeterCategoryID==1"
                                                        class="icon iconfont icon-shuibiao aui-margin-r-5"
                                                        style="color: #289FFF;"></i>
                                                    <i v-if="item.MeterCategoryID==2"
                                                        class="icon iconfont icon-dianbiao aui-margin-r-5"
                                                        style="color: coral;"></i>
                                                    <i v-if="item.MeterCategoryID==3"
                                                        class="icon iconfont icon-qibiao aui-margin-r-5"
                                                        style="color: red;"></i>
                                                </span>
                                                {{item.MeterName}}<span v-if="item.MeterName&&item.MeterNumber"> |
                                                </span>{{item.MeterNumber}}
                                                <van-tag v-show="item.IsMonthWrite" color="#ff7f50"
                                                    class="new-content-tag" style="top: 2px;right: 18px;" plain>本月已抄
                                                </van-tag>
                                            </span>
                                            <span v-on:click="onOpenRecord(item)" class="typestatus text-right"
                                                style="position: absolute;top: 2px; right: 0;">
                                                <van-icon name="arrow" />
                                            </span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="RoomList.length>0" class="notodayList">
                    没有更多内容
                </div>
            </div>
            <div class="noinfo" id="noorder" v-if="RoomList.length==0">
                <img src="../image/index/noinfomsg_icon.png" alt="" />
                <h5><br />暂无相关数据</h5>
            </div>
        </section>

        <!--底部弹出年月选择-->
        <van-popup v-model:show="showsearchmonth" round position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker v-model="currentDate" type="date" title="选择日期" :min-date="minDate" :max-date="maxDate"
                @cancel="doHideSearch" @confirm="onConfirm" />
        </van-popup>

        <!--底部按钮 -->
        <div v-if="RoomList.length>0" class="aui_bottom">
            <div v-on:click="showChooseAll()" class="left-btn" style="box-shadow: none;text-align: left;">
                <van-checkbox v-model="IsAllChecked" shape="square" class="aui-margin-t-15 aui-margin-l-10">
                    已选({{chooseList.length}})
                </van-checkbox>
            </div>
            <div v-on:click="do_save()" class="right-btn" v-bind:class="{'right-btn-grey':chooseList.length<=0}"
                style="position: relative;">录入读数
                <i class="icon iconfont icon-xiangyouright new-icon-btn-right"></i>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/aui-pull-refresh.js"></script>
<!-- <script type="text/javascript" src="../script/aui-scroll.js"></script> -->
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript " src="../script/moment/moment.js"></script>
<script type="text/javascript" src="js/meterwritechoose.js"></script>

</html>